<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Example 54 (HTTP) - Updating a region using the Javascript API</title>
<script type="text/javascript" src="../dist/jquery-1.3.1.js"></script>
<script type="text/javascript" src="../dist/flowplayer-3.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/global.css" />
</head>
<body>
<h2>Example 54 (HTTP) - Updating a region using the Javascript API</h2>
<p class="example">
This example illustrates how the styling of a region may be updated dynamically using
the OAS Javascript setRegionStyle() API. A region called "updatable-region" has been declared
in this example and you can use the text box below the player to dynamically change
the styling of that region. We've made the region background light grey by default
with a standard piece of text so to help illustrate how you can modify the region
styling.
</p>
<br/>
<div id="container">
  <div id="player_row">
     <div id="player-left-345">
        <a class="player614x345"></a>
     </div>
     <div id="player-right-345">
         <form>
             <textarea cols="20" rows="10" id="cssTextArea">.smalltext { font-style: italic; font-size:10; }
             </textarea>
             <br/>
             <br/>
			 <button type="button" id="viewTemplateButton" enabled onClick="javascript:updateStyleSheet();">
				Update Stylesheet Values
			 </button>
			 <button type="button" id="viewTemplateButton" enabled onClick="javascript:replaceStyleSheet();">
				Replace Stylesheet With Values
			 </button>
		</form>
     </div>
  </div>
</div>
<script type="text/javascript">
var player = flowplayer("a.player614x345", "../dist/flowplayer-3.1.5.swf", {
    plugins: {	    
        controls: {
            autoHide: "always"
        },

        openAdStreamer: {
            url: '../dist/OpenAdStreamer.swf',
//            "url": "/fp-http/OpenAdStreamer.swf",

            "debug": {
                "debugger": "firebug",
                "levels": "fatal"
            },

            "shows": {
                "streams": [ 
                    { 
                        "file":"http://streaming.openvideoads.org/shows/the-black-hole.mp4", 
                        "duration":"00:00:30" 
                    } 
                ]
            },

            "overlays": {
                "regions": [
                    {
                        "id": "updatable-region",
                        "verticalAlign": "bottom",
                        "horizontalAlign": "center",
                        "backgroundColor": "transparent",
                        "width": "100pct",
                        "height": 40,
                        "style": ".smalltext { font-style: italic; font-size:10; }"
                    }
                ]
            },
            
            "ads": {
                "pauseOnClickThrough": true,
                "servers": [
                    {
                        "type": "OpenX",
                        "apiAddress": "http://openx.openvideoads.org/openx/www/delivery/fc.php"
                    }
                ],
                "schedule": [
                    {
                        "zone": "blank",
                        "position": "updatable-region",
                        "startTime": "00:00:00",
                        "duration": "30"
                    }
                ]
            }
        }
    }
});

function updateStyleSheet() {
    player.start();
	return true;
}

function replaceStyleSheet() {
    player.stop();
	return true;
}
</script>
<p>
The configuration for this example is:
</p>
<div class="codebox">
<pre>
<code class="javascript">
flowplayer("a.example", "../dist/flowplayer-3.1.5.swf", {
    plugins: {
        controls: {
            autoHide: "always"
        },

        openAdStreamer: {
            url: '../dist/OpenAdStreamer.swf',

            "debug": {
                "debugger": "firebug",
                "levels": "fatal"
            },

            "ads": {
                "pauseOnClickThrough": true,
                "servers": [
                   {
                       "type": "OpenX",
                       "apiAddress": "http://openx.openvideoads.org/openx/www/delivery/fc.php"
                   }
                ],
                "schedule": [
                    {
                       "zone": "5",
                       "position": "pre-roll"
                    }
                 ]
             }
         }
     }
});
</code>
</pre>
</div>
<script type="text/javascript" src="js/tracking.js">
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10158120-3");
if(TRACKING_TURNED_ON) {
  pageTracker._trackPageview();
}
} catch(err) {}
</script>
</body>
</html>